<template>
	<div>
		<el-container>
			<el-header height="300px">header</el-header>
			<el-container>
				<el-aside width="200px">aside</el-aside>
				<el-main>main</el-main>
			</el-container>
			<el-footer height="200px">footer</el-footer>
		</el-container>
	</div>
</template>

<script>
	export default {
		//   name: "container"
	}
</script>

<style lang="scss" scoped>
	.el-header,
	.el-footer {
		background-color: #b3c0d1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}
	.el-aside {
		background-color: #d3dce6;
		color: #333;
		text-align: center;
		line-height: 200px;
	}
	.el-main {
		background-color: #e9eef3;
		color: #333;
		text-align: center;
		line-height: 160px;
	}

	body > .el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}
</style>
